// script.js
let todos = [];

function addTodo() {
    const input = document.getElementById('todoInput');
    const text = input.value.trim();
    if (text) {
        todos.push({ id: Date.now(), text, completed: false });
        input.value = '';
        renderTodos();
    }
}

function renderTodos() {
    const list = document.getElementById('todoList');
    list.innerHTML = todos.map(todo => `
        <li>
            <span class="${todo.completed ? 'completed' : ''}" onclick="toggleTodo(${todo.id})">${todo.text}</span>
            <span class="delete" onclick="deleteTodo(${todo.id})">×</span>
        </li>
    `).join('');
}

function toggleTodo(id) {
    todos = todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo);
    renderTodos();
}

function deleteTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
    renderTodos();
}